<template>
  <button @click="goBack" class="btn1">RETURN</button>
  <el-container class="blog-container">
    <el-button @click="toggleBookmark" type="primary" class="btn">
      {{ isBookmarked ? '取消收藏' : '收藏' }}
    </el-button>
    <el-header>
      <h1 class="title1">{{ blog.title }}</h1>
    </el-header>
    <el-main>

      <p class="cnt">{{ blog.content }}</p>
      <p class="cnt">创建时间：{{ blog.createDate }}</p>

      <el-button @click="toggleRemarks" type="primary" class="btn" >
        点击{{ showRemarks ? '关闭' : '查看' }}评论
      </el-button>
      <el-collapse v-if="showRemarks" class="ccollapse">
        <div v-for="remark in remarks" :key="remark.id" class="mes">
          <p class="cnt">{{ remark.observer }}</p>
          <p class="cnt">{{ remark.content }}</p>
          <p >{{ remark.createDate }}</p>
        </div>
      </el-collapse>

      <el-form v-if="showRemarks" class="cform" label-width="100px" @submit.prevent >
        <el-form-item class="pl"  label="评论">
          <el-input class="txt11" v-model="newRemark" type="textarea" rows="3"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitRemark"  class="btn">提交评论</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      blog: {},
      remarks: [],
      showRemarks: false,
      newRemark: '',
      blogId: '',
      isBookmarked: false
    };
  },
  mounted() {
    this.getBlogDetail();
    this.getRemarkDetail();
    this.checkBookmarkStatus();
    console.log()
  },
  methods: {
    checkBookmarkStatus() {
      const id = this.$route.params.id;
      axios.get(`/api/checkBookmark/${id}`)
          .then((response) => {
            const result = response.data;
            if (result.code === 100) {
              this.isBookmarked = true;
            } else {
              this.isBookmarked = false;
            }
          })
          .catch((error) => {
            console.error(error);
          });
    },
    toggleBookmark() {
      const blogId = this.$route.params.id;
      if (this.isBookmarked) {
        axios.post(`/api/deleteBookmark/${blogId}`)
            .then((response) => {
              if (response.data.code === 200) {
                this.isBookmarked = false;
              }
            })
            .catch((error) => {
              console.error(error);
            });
      } else {
        axios.post('/api/addBookmark', { blogId: blogId })
            .then((response) => {
              if (response.data.code === 200) {
                this.isBookmarked = true;
              }
            })
            .catch((error) => {
              console.error(error);
            });
      }
    },

    getBlogDetail() {
      const id = this.$route.params.id;
      axios.get(`/api/posts/${id}`)
          .then((response) => {
            this.blog = response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    getRemarkDetail() {
      const id = this.$route.params.id;
      axios.get(`/api/remark/${id}`)
          .then((response) => {
            this.remarks = response.data.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    toggleRemarks() {
      this.showRemarks = !this.showRemarks;
    },
    submitRemark() {
      if (this.newRemark.trim() === '') {
        return;
      }
      const remarkData = {
        content: this.newRemark,
        blogId: this.$route.params.id
      };
      console.log(remarkData);
      axios.post('/api/remark', remarkData)
          .then((response) => {
            this.newRemark = '';
            this.getRemarkDetail();
          })
          .catch((error) => {
            console.error(error);
          });
    },
    deleteRemark(id) {
      const r = confirm("确定要删除吗？");
      if (r==true){
        axios.delete(`/api/remark/${id}`)
            .then(response => {
              this.getRemarkDetail();
            })
            .catch(error => {
              console.error(error);
            });
      }
      else{
        return
      }
    },
  },
};
</script>
<style>

.blog-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border:3px solid #666666;
  border-radius: 5px ;
}
.title1 {
  font-size: 35px;
  margin-bottom: 80px;
  font-style: initial;
}
.cnt{
  line-height: 1.5;
  text-align: left;
  width: 800px;
  height: 50px;
  overflow: auto;
  border: 2px dashed transparent;
  color:white;
  font-weight: bold;
  font-family: Papyrus,STXiHei,sans-serif;
}


.ccollapse {
  margin-top: 20px;

}

.ccollapse-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}

.ccollapse-item__content p {
  margin-bottom: 5px;


}
.ccollapse-item__content p:last-child {
  margin-bottom: 0;

}

header{
  font-weight:bold ;
  font-family: Papyrus,STXiHei,sans-serif;
  color:#ffffff;
  font-size:65px;
  height:80px;

}
main{
  text-align: right;
}

textarea{
  hidden:true;
  height:100px;
  width:800px;
  background:transparent;
  outline: none;
  color:#ffffff;
}

body{
  height: 100%;
}
.btn1{
  width:65px;
  height: 35px;
  line-height: 35px;
  background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
  border-radius: 5px;
  display: flex;
  margin-left:45px;
  margin-top: 45px;
  text-align: center;
}
.btn1:hover{
  cursor: pointer;
  background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);

}
.mes{
  border:1px solid #666666;
  border-radius: 5px ;
  background:linear-gradient(90deg,#000000,#d1d2d4);

}
.pl{
  display: block;
  text-align:left;
  color: #fff;
  font-weight: bold;
  font-family: Papyrus,STXiHei,sans-serif;
}


</style>
